<template>
  <div class="absolute-test">
    <h2>absolute测试</h2>
    <div style="position: relative">
      <div class="child1">
        <div class="child4">child4</div>
      </div>
      <div class="child2">child2</div>
      <div class="child3">child3</div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>层级child4 > child3 > child2</p>
    <p>child4外层包裹了一个child1，若想把child4放到最下面，可以调高child2，child3的层级大于child4。</p>
    <p>或者设置child1也为浮动定位 position: absolute; z-index: 小于child2。</p>
    <p>元素的absolute的定位是相对最近的relative而言。</p>
    <p>设置absolute的元素自身不再属于父级，就相当于漂浮在父级元素之上了。多个absolute的元素的层级顺序根据z-index来，若层级高的子元素也absolute，不管子如何设置z-index，层级也比层级底的高。</p>
    <h2>margin测试</h2>
    <div>我是第一行元素</div>
    <div class="margin-test">
      <div class="child">我是子元素，有一个margin-top</div>
    </div>
    <p>第一个子级的margin-top,bottom 会传递到父级上。</p>
    <p>给父级添加border;或者设置overflow属性能解决。</p>
    <p>但是，假如父级没设置高度，上面方法会把父级撑开，表现为父height = 子height + margin-top值。</p>
    <p>最好别给第一个子级设置margin-top,bottom，这种需求完全可以用padding代替。</p>
    <h2>伪类选择器</h2>
    <p>伪类选择器，需要与其他选择器连用，表示基于xxx元素的父级下，进一步筛选。</p>
    <p>比如div下有4个p一个div，用p:last-child选中的是div而不是最后一个p，选中是p的父级下的最后一个元素</p>
    <p>例如：.theli:first-child，选择class为theli中的第一个，或者 li:first-child，tag为li的第一个。</p>
    <p>:first-child ------ 多个中的第一个</p>
    <p>:last-child ------ 多个中的最后一个</p>
    <p>:nth-child(4) ------ 多个中的第4个，4可为任意数字</p>
    <p>:nth-child(2n) ------ 多个中的所有偶数</p>
    <p>:nth-child(2n-1) ------ 多个中的所有奇数</p>
    <p>:nth-child(n+4) ------ 多个中第4个开始到最后，4可为任意数字</p>
    <p>:nth-last-child(4) ------ 多个中的倒数第4个，4可为任意数字</p>
    <ul>
      <li class="theli">我是第一个li标签，class为theli</li>
      <li class="theli">我是第二个li标签，class为theli</li>
      <li class="theli">我是第三个li标签，class为theli</li>
      <li class="theli">我是第四个li标签，class为theli</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'absolutetest',
    components: {}
  };
</script>

<style lang="scss" scoped>
  .absolute-test {
    .child4 {
      position: absolute;
      z-index: 2;
      width: 60px;
      height: 60px;
      background-color: #096;
    }
    .child2 {
      position: absolute;
      z-index: 6;
      width: 100px;
      height: 100px;
      background-color: #09f;
      text-align: right;
    }
    .child3 {
      position: absolute;
      z-index: 8;
      width: 80px;
      height: 80px;
      background-color: #ff6600;
      text-align: right;
    }
    .child1 {
      position: absolute;
      z-index: 10;
    }

    .margin-test {
      width: 240px;
      // height: 100px;
      background-color: #ff6600;
      // overflow: auto;
      border: none;
      .child {
        // padding-top: 10px;
        margin-top: 10px;
        height: 60px;
        width: 100%;
        background-color: #ff0099;
      }
    }
    // 伪类选择器测试
    // .theli:first-child {
    //   background-color: #ff0099;
    // }
    li:first-child {
      background-color: #ff0099;
    }
    li:last-child {
      background-color: #ff6600;
    }
    li:nth-child(3) {
      color: #09f;
    }
  }
</style>


